<template>
  <div>
    <el-upload
      ref="upload"
      v-if="fileList.length===0"
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :http-request="upload"
      :before-upload="beforeUpload"
      :on-change="onChange"
      :limit="1"
    >
      <i class="el-icon-plus"></i>
      <div slot="tip" class="el-upload__tip" v-html="tips">
      </div>
    </el-upload>

    <ul class="el-upload-list el-upload-list--picture-card" v-show="fileList.length!==0">
      <li class="el-upload-list__item is-ready">
        <img :src="dialogImageUrl" alt="" class="el-upload-list__item-thumbnail"/>
        <a href="" class="el-upload-list__item-name">
          <i class="el-icon-document"></i>
        </a>
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-check"></i>
        </label>
        <i class="el-icon-close"></i>
        <i class="el-icon-close-tip"></i>
        <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="previewImg">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span class="el-upload-list__item-delete" @click="deleteImg">
                <i class="el-icon-delete"></i>
              </span>
            </span>
      </li>
    </ul>
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt=""/>
    </el-dialog>

  </div>
</template>

<script>
import {common} from '@/utils/common'
import api from './api'
import {getCookie} from '@/utils/util'
import {CONSTANT_OBJ} from '@/utils/constant'

export default {
  props: {
    tips: String,
    value: String
  },
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      showUpload: true,
      fileList: [],
    }
  },
  methods: {
    // 预览图片
    previewImg () {
      this.dialogVisible = true
    },
    // 删除图片
    deleteImg () {
      this.fileList = []
      this.dialogImageUrl = ''
    },
    upload (file) {
    },

    onChange (file, fileList) {
      this.fileList = fileList

      const {name} = file.raw
      this.getBase64(file.raw).then(res => {
        const params = res.split(',')
        console.log(params, 'params')
        if (params.length > 0) {
          let data1 = {
            tenantId: getCookie('tenantId'),
            originalFilename: name, image: params[0] + ',' + params[1],
            imageType: 'LOGO',
            imageSubType: 'CORPORATION_LOGO'
          }
          api.uplodaImg(data1)
            .then(res => {
              const {responseCode, data} = res
              if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
                this.$emit('onChange', data)
              }
            })
          this.dialogImageUrl = params[0] + ',' + params[1]
        }
      })

    },
    beforeUpload (file) {
    },
    handleRemove (file, fileList) {
      // this.$emit('onChange', file)
      console.log(file, fileList)
    },

    // 获取图片转base64
    getBase64 (file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
  },
  watch: {
    value (val) {
      this.$nextTick(() => {
        this.dialogImageUrl = val
        this.fileList = [{url: val}]
      })
    }
  },
  mounted () {
    this.dialogImageUrl = this.value
  }
}
</script>

<style scoped>
</style>

